$(function () {

    /* 全局查询一级分类的参数 */
    var QueryObj = {
        page: 1,
        pageSize: 2
    }

    /* 设置总页数 */
    var totalPage = 1;

    /* 全局的插件表单对象 */
    var ValiForm;

    /* 初始化 */
    init();
    function init() {
        /* 调用一级分类查询 */
        queryTopCategoryPaging();
        /* 调用表单验证 */
        setFormValite();
    }

    /* 请求一级分类的数据 */
    function queryTopCategoryPaging() {
        $.get("/category/queryTopCategoryPaging", QueryObj, function (result) {
            // console.log(result);
            /* 计算总页数 */
            totalPage = Math.ceil(result.total / QueryObj.pageSize);

            /* 把数据填充到表格里面 */
            var htmlArr = ['<tr><th>序号</th><th>一级分类名称</th></tr>'];
            for (var i = 0; i < result.rows.length; i++) {
                htmlArr.push('<tr><td>'+ ((QueryObj.page - 1) * QueryObj.pageSize + i + 1) +'</td ><td>'+ result.rows[i].categoryName +'</td></tr >');            
            }
            /* 把数据动态添加到结构中 */
            $(".first-cat").html(htmlArr.join(''));

            /* 设置分页，调用设置分页函数 */
            setPage();
        });
    }


    /* 设置分页器 */
    function setPage() {
        // 配置
        var options = {
            bootstrapMajorVersion: 3,// bootstrap为3.x版本的时候要声明
            alignment: "left",//左侧显示
            currentPage: QueryObj.page,//当前页数
            totalPages: totalPage,//总页数 注意不是总条数

            // 点击页码的时候触发
            onPageClicked: function (e, oe, type, page) {
                // event, originalEvent, type,page。
                // page 为被点击的页码

                /* 每次点击的时候重新设置当前页码 */
                QueryObj.page = page;
                queryTopCategoryPaging();
            }
        }

        // 初始化
        $(".pagination").bootstrapPaginator(options);
    }

    /* 启用表单验证 */
    function setFormValite() {
        /* 对表单进行设置 */
        var $form = $("#fir-form").bootstrapValidator({
            /* 校验插件默认会忽略隐藏的表单元素，不忽略任何情况的表单元素 */
            // 图标
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            // 要验证的字段
            fields: {
                // 分类名称-name属性
                // categoryName: {
                //     // 用户名的提示信息
                //     // message: 'The username is not valid',
                //     validators: {
                //         // 不能为空
                //         notEmpty: {
                //             message: '分类名称不能为空'
                //         },
                //         // 提供给ajax回调使用
                //         callback: {
                //             message: "用户名不存在"
                //         }
                //     }
                // }
            }
        });
        /* 开启表单验证，满足条件的时候自己执行 */
        $form.on("success.form.bv", function (e) {
            // 点击提交的时候  
            // 阻止默认提交事件
            e.preventDefault();

            /* 把表单的内容提交 */
            addTopCategory(function (result) {
                /* 关闭模态框 */
                $('#addFirst').modal('hide');
                /* 刷新数据 === 调用查询一级分类函数，在函数里面已经更新了分页插件 */
                queryTopCategoryPaging();
            });
        });
        ValiForm = $form;
    }


    /* 把一级分类的数据发送到后台 */
    function addTopCategory(callback) {
        /* 获取参数 */
        var categoryName = $("#categoryName").val();
        // console.log(categoryName);
        var obj = { categoryName: categoryName };
        $.post("/category/addTopCategory", obj, function (result) {
            // console.log(11111);
            if (result.success) {
                console.log(123);
                callback && callback(result);
            } else {
                console.log(asd);
            }
        });
    }

    /* 重置表单的信息 */
    /* 使用的是 hide.bs.modal */
    $("#addFirst").on("hide.bs.modal", function (e) {
        /* 使用js重置输入框的文字 */
        $("#fir-form")[0].reset();

        /* 重置验证信息 === 插件重置 */
        $("#fir-form").data("bootstrapValidator").resetForm();
    });
});